<template>
  <div :class="{ 'sirui-search': isQueryPanel, 'edit-form': !isQueryPanel }" ref="sub">
    <el-form
      label-position="right"
      :rules="computedRules"
      :label-width="labelWidth"
      :model="query"
      ref="queryFrom"
      :validate-on-rule-change="false"
      :disabled="isDisabledForm"
    >
      <el-row :gutter="20">
        <div v-for="(searchColumn, i) in searchColumns" :key="i">
          <el-row :gutter="10" :style="{ display: expand ? 'block' : i == 0 ? 'block' : 'none' }">
            <el-col
              v-for="(column, index) in searchColumn"
              :key="index"
              class="search-item"
              :span="column.span || colSpan"
            >
              <!--开始时间-->
              <FormWrapper
                v-if="column.type == 'startDateRangePicker'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="query[column.prop]"
                  :ref="column.prop"
                  :disabled="column.disabled || isDisabledForm"
                  type="date"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerStartOptions"
                  @focus="() => handleFocusDate('start', column.prop, column.index)"
                  @change="(val) => handleChange(val, column.prop, column.changeMethod)"
                ></el-date-picker>
              </FormWrapper>
              <!--结束时间-->
              <FormWrapper
                v-if="column.type == 'endDateRangePicker'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-date-picker
                  clearable
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  type="date"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  value-format="yyyy-MM-dd"
                  :disabled="column.disabled"
                  :picker-options="pickerEndOptions"
                  @focus="() => handleFocusDate('end', column.prop, column.index, column.flag)"
                  @change="(val) => handleChange(val, column.prop, column.changeMethod)"
                ></el-date-picker>
              </FormWrapper>
              <!--开始时间-时分秒-->
              <FormWrapper
                v-if="column.type == 'startDateRangePickerTime'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-date-picker
                  clearable
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :disabled="column.disabled"
                  type="datetime"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerStartOptions"
                  @focus="() => handleFocusDate('start', column.prop, column.index)"
                  @change="(val) => handleChange(val, column.prop, column.changeMethod)"
                ></el-date-picker>
              </FormWrapper>

              <!--结束时间-时分秒-->
              <FormWrapper
                v-if="column.type == 'endDateRangePickerTime'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-date-picker
                  clearable
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  type="datetime"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerEndOptions"
                  @focus="() => handleFocusDate('end', column.prop, column.index)"
                  @change="(val) => handleChange(val, column.prop, column.changeMethod)"
                ></el-date-picker>
              </FormWrapper>

              <!-- 时间范围 -->
              <FormWrapper
                v-if="column.type == 'daterange'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-date-picker
                  clearable
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :disabled="column.disabled"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :range-separator="column.separator ?? '-'"
                  :start-placeholder="column.startPlaceholder ?? '开始时间'"
                  :end-placeholder="column.endPlaceholder ?? '结束时间'"
                ></el-date-picker>
              </FormWrapper>
              <!--文案-->
              <FormWrapper
                v-if="column.type == 'text'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <span class="line-text">{{ query[column.prop] }}</span>
              </FormWrapper>
              <!-- 输入框 -->
              <FormWrapper
                v-if="column.type == 'input'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-input
                  style="width: 100%"
                  :ref="column.prop"
                  :maxlength="column.maxlength || 32"
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  clearable
                  :disabled="column.disabled || false"
                >
                  <template slot="append" v-if="column.append">{{ column.append }}</template>
                </el-input>
              </FormWrapper>
              <!-- 文本域 -->
              <FormWrapper
                v-if="column.type == 'textarea'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  :maxlength="column.maxlength || 32"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  clearable
                  :disabled="column.disabled || false"
                />
              </FormWrapper>
              <!-- 下拉选择框 -->
              <FormWrapper
                v-if="column.type == 'select'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-select
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  @change="(val) => changeMethod(val, column.relatedColumn, column.changeMethod, column.prop)"
                  @clear="(val) => clearMethod(val, column.clearMethod)"
                  filterable
                  :multiple="column.multiple || false"
                  :clearable="column.clearable || true"
                  :disabled="column.disabled || false"
                >
                  <el-option
                    v-for="item in column.options ?? []"
                    :key="item.value ?? item['value']"
                    :label="item.label ?? item['label']"
                    :value="item.value ?? item['value']"
                  ></el-option>
                </el-select>
              </FormWrapper>
              <!-- 字典选择器 -->
              <FormWrapper
                v-if="column.type == 'dict'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-select
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  @change="(val) => changeMethod(val, column.relatedColumn, column.changeMethod, column.prop)"
                  @clear="(val) => clearMethod(val, column.clearMethod)"
                  filterable
                  :multiple="column.multiple || false"
                  :clearable="column.clearable || true"
                  :disabled="column.disabled || false"
                >
                  <el-option
                    v-for="item in dictListMap[column.dictType]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </FormWrapper>
              <!-- 输入范围选择 -->
              <InputRange
                v-if="['inputRange', 'selectInput'].includes(column.type)"
                v-bind="$attrs"
                v-on="$listeners"
                :ref="column.prop"
                :query="query"
                :column="column"
              />
              <!-- 范围选择 -->
              <SelectRange
                v-if="column.type == 'selectRange'"
                v-bind="$attrs"
                v-on="$listeners"
                :ref="column.prop"
                :query="query"
                :column="column"
              />
              <!-- 地址选择器开始 -->
              <FormWrapper
                v-if="column.type == 'provinceAddress'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-select
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  @change="(event) => changeAddressSelectHandler(event, column, 'provinceAddress')"
                  @clear="() => clearAddressSelectHandler(query, column)"
                  filterable
                  :multiple="column.multiple || false"
                  :clearable="column.clearable || true"
                  :disabled="column.disabled || false"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item[valueKey]"
                    :label="item[labelKey]"
                    :value="item[valueKey]"
                  >
                  </el-option>
                </el-select>
              </FormWrapper>
              <FormWrapper
                v-if="column.type == 'cityAddress'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-select
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  :disabled="column.disabled"
                  style="width: 100%"
                  :ref="column.prop"
                  :clearable="clearable"
                  @change="(event) => changeAddressSelectHandler(event, column, 'cityAddress')"
                  @clear="() => clearAddressSelectHandler(query, column)"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item[valueKey]"
                    :label="item[labelKey]"
                    :value="item[valueKey]"
                  >
                  </el-option>
                </el-select>
              </FormWrapper>
              <FormWrapper
                v-if="column.type == 'areaAddress'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-select
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  :disabled="column.disabled"
                  style="width: 100%"
                  :ref="column.prop"
                  :clearable="clearable"
                  @change="(event) => changeAddressSelectHandler(event, column, 'areaAddress')"
                  @clear="() => clearAddressSelectHandler(query, column)"
                >
                  <el-option
                    v-for="item in areaList"
                    :key="item[valueKey]"
                    :label="item[labelKey]"
                    :value="item[valueKey]"
                  >
                  </el-option>
                </el-select>
              </FormWrapper>
              <!-- 地址选择器结束 -->

              <!-- 公司部门选择器开始 -->
              <FormWrapper
                v-if="column.type == 'company'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-select
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  @change="(value) => changeCompanyDepartmentHandler(value, column, 'company')"
                  @clear="() => clearCompanyDepartmentMethod(query, column)"
                  filterable
                  :multiple="column.multiple || false"
                  :clearable="column.clearable || true"
                  :disabled="column.disabled || false"
                >
                  <el-option
                    v-for="item in companyList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </FormWrapper>
              <FormWrapper
                v-if="column.type == 'department'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <el-select
                  style="width: 100%"
                  :ref="column.prop"
                  v-model="query[column.prop]"
                  :placeholder="column.placeholder || getPlaceHolder(column)"
                  @change="(value) => changeCompanyDepartmentHandler(value, column, 'department')"
                  @clear="() => clearCompanyDepartmentMethod(query, column)"
                  filterable
                  :multiple="column.multiple || false"
                  :clearable="column.clearable || true"
                  :disabled="column.disabled || false"
                >
                  <el-option
                    v-for="item in departmentList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </FormWrapper>
              <!-- 公司部门选择器结束 -->
              <!-- 搜索表格开始 -->
              <FormWrapper
                v-if="column.type == 'searchTableSpec'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <SiruiTable
                  v-model="query[column.prop]"
                  :searchType="column.searchType"
                  :extraData="column.extraData"
                  :isMultiple="column.isMultiple"
                  :checkRowKeys="column.checkRowKeys"
                  :disabled="column.disabled || isDisabledForm"
                  :extraQueryFields="column.extraQueryFields"
                  :inputField="column.inputField"
                  :ref="column.prop"
                  @input="(val) => changeMethod(val, column)"
                />
              </FormWrapper>

              <!-- 搜索表格结束 -->

              <!-- 树组件开始 -->
              <FormWrapper
                v-if="column.type == 'treeSelect'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <Treeselect
                  v-model="query[column.prop]"
                  :options="column.options"
                  :ref="column.prop"
                  :isMultiple="column.isMultiple"
                  :disabled="column.disabled || isDisabledForm"
                  :placeholder="column.placeholder"
                ></Treeselect>
              </FormWrapper>
              <!-- 树组件结束 -->

              <!-- 金额组件开始 -->
              <FormWrapper
                v-if="column.type == 'amount'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
              >
                <InputAmount
                  v-model="query[column.prop]"
                  :disabled="column.disabled || isDisabledForm"
                  :placeholder="column.placeholder"
                  :append="column.append"
                  :ref="column.prop"
                />
              </FormWrapper>
              <!-- 数量组件开始 -->
              <FormWrapper
                v-if="column.type == 'quantity'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
                :ref="column.prop"
              >
                <InputQuantity
                  v-model="query[column.prop]"
                  :disabled="column.disabled || isDisabledForm"
                  :placeholder="column.placeholder"
                  :append="column.append"
                />
              </FormWrapper>
              <!-- 普通数值组件开始 -->
              <FormWrapper
                v-if="column.type == 'inputNumber'"
                v-bind="$attrs"
                v-on="$listeners"
                :query="query"
                :column="column"
                :ref="column.prop"
              >
                <inputNumber
                  v-model="query[column.prop]"
                  :disabled="column.disabled || isDisabledForm"
                  :placeholder="column.placeholder"
                  :append="column.append"
                />
              </FormWrapper>
            </el-col>
          </el-row>
        </div>
        <el-row v-if="isQueryPanel" style="display: flex; justify-content: flex-end; margin-bottom: 10px">
          <el-col class="text-right" :span="6" style="display: flex; justify-content: flex-end">
            <a href="javascript:;" class="search" @click="search()">
              <svg-icon style="font-size: 16px; padding-right: 6px" icon-class="search" />
              搜索</a
            >
            <a href="javascript:;" class="reset" @click="resetForm('queryFrom')">
              <svg-icon style="font-size: 16px; padding-right: 6px" icon-class="reset" />
              重置</a
            >
            <div :class="{ 'open-btn': true, active: !expand }" v-if="columns.length > columnNumber" @click="toggle">
              <svg-icon style="font-size: 16px; padding-right: 6px" icon-class="open-btn" />
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import FormWrapper from './components/FormWrapper';
import InputRange from './components/InputRange';
import SelectRange from './components/SelectRange';
import FullAddressSelect from './../FullAddressSelect';
/********************************定义一个方法将mixins中的文件全部导入进来 start********************************/
const mixinsList = [];
function importAll(r) {
  r.keys().forEach((key) => mixinsList.push(r(key).default));
}
importAll(require.context('./mixins', true, /\.js/));
/********************************定义一个方法将mixins中的文件全部导入进来 end********************************/

export default {
  mixins: mixinsList,
  props: {
    query: {
      type: Object,
      default: () => {},
    },
    labelWidth: {
      type: String,
      default: '120px',
    },
    //解析extendMap
    parseExtendMap: {
      type: Boolean,
      default: false,
    },
    /**
     * columns筛选参数：
     * name:'名称'
     * prop:'字段名字'
     * type'编辑类型',['inpput','select','selectMultiple','date','datetime']
     * options:当编辑类型是select时的初始数据。
     * maxlength:可输入的最大长度
     */
    columns: {
      type: Array,
      default: () => [],
    },
    // 搜索默认分隔的colSpan，默认分成4列
    colSpan: {
      type: Number,
      default: 6,
    },
    // 右边按钮占位，弹窗占位需要宽一点
    buttonSpan: {
      type: Number,
      default: 4,
    },
    rules: {
      type: Object,
      default: () => {},
    },
    // 是否为搜索面板
    isQueryPanel: {
      type: Boolean,
      default: true,
    },
    // 是否禁用表单
    isDisabledForm: {
      type: Boolean,
      default: false,
    },
    errorMessage: {
      type: String,
      default: '请填写完资料',
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      pickerDateTimeOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerStartOptions: {}, // 开始日期配置
      pickerEndOptions: {}, // 结束日期配置
      pickerTimeOptions: {},
      expand: this.isQueryPanel ? false : true,
    };
  },

  computed: {
    // 表单列数
    columnNumber() {
      const colSpan = this.colSpan;
      return Math.floor(24 / colSpan);
    },
    expandText() {
      return !this.expand ? '展开' : '收起';
    },
    inputTip() {
      return '请输入';
    },
    selectTip() {
      return '请选择';
    },
    searchColumns() {
      let list = [];
      let all = 0;
      // 根据每一列占据的span数组装二维数组
      const colSpan = this.colSpan;
      let children = [];
      for (let i = 0; i < this.columns.length; i++) {
        let item = this.columns[i];
        if (item.isHidden) {
          continue;
        }

        item.index = i;
        const span = item.span || colSpan;
        if (all + span < 24) {
          all += span;
          children.push(item);
        } else if (all + span === 24) {
          list.push(children.concat(item));
          all = 0;
          children = [];
        } else {
          list.push(children);
          children = [item];
          all = span;
        }
      }
      // this.columns.forEach((item, index) => {

      // });
      if (children.length) {
        list.push(children);
      }
      return list;
    },
    propLength() {
      return this.$store.getters.language == 'zh_CN' ? 8 : 14;
    },
    buttonCol() {
      if (!this.isQueryPanel) {
        return 0;
      } else {
        const span = this.buttonSpan;
        return this.$store.getters.language == 'zh_CN' ? span : span + 1;
      }
    },
    computedRules() {
      // 循环当前column中是否有必填字段
      let resultObj = {};
      for (const item of this.columns) {
        resultObj[item.prop] = [{ required: item.required, message: `${item.name}必填`, trigger: ['change', 'blur'] }];
      }
      // 将传递进来的替换字段
      for (const key in this.rules) {
        resultObj[key] = this.rules[key];
      }
      return resultObj;
    },
  },
  methods: {
    // 效验参数，提交使用
    validate(fn) {
      this.$refs.queryFrom.validate((valid) => fn(valid, valid ? this.query : {}));
    },
    clearValidate(val) {
      this.$refs.queryFrom.clearValidate(val);
    },
    // 校验数据
    getValidateFormData(isValidate = true) {
      return new Promise((resolve, reject) => {
        if (isValidate) {
          try {
            this.$refs.queryFrom.validate((valid, invalidFields) => {
              if (valid) {
                resolve(this.query);
              } else {
                const invalidElementRef = Object.keys(invalidFields)[0];
                this.$nextTick(() => {
                  const element = this.$refs[invalidElementRef][0]?.$el;
                  if (element) {
                    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }
                });
                this.$message.error(this.errorMessage);
                reject({});
              }
            });
          } catch (e) {
            console.error(e);
          }
        } else {
          resolve(this.query);
        }
      });
    },
    handleChange(val, prop, method) {
      if (method) {
        this.$emit(method, { val: val, prop: prop });
      }
    },
    getPlaceHolder(option) {
      // 已禁用的选项不展示 placeholder
      if (option.disabled) {
        return '';
      }
      const inputArr = ['input', 'textarea', 'inputNumber'];
      return (
        (inputArr.indexOf(option.type) > -1 ? this.inputTip : this.selectTip) +
        (option.name === '至' ? '日期' : option.name || '')
      );
    },
    // 资金预报表根据选择的年月限制选择的日期范围
    handleFocusDateFin(type, forecastYear, forecastMonth) {
      if (type == 'date') {
        let timeStart = forecastYear + '/' + forecastMonth + '/01'; //解决火狐和谷歌时区不一致问题
        let timeEnd = new Date(timeStart);
        timeEnd.setMonth(timeEnd.getMonth() + 1);
        this.pickerTimeOptions = {
          disabledDate: (time) => {
            return (
              time.getTime() < new Date(timeStart).getTime() ||
              time.getTime() > new Date(timeEnd).getTime() - 24 * 60 * 60 * 1000
            );
          },
        };
      }
    },
    // 开始结束日期
    handleFocusDate(type, prop, index, flag) {
      const dateProp = type == 'start' ? this.columns[index + 1].prop : this.columns[index - 1].prop;
      const pickerOptions = {
        disabledDate: (time) => {
          return this.disabledDate(time, dateProp, type, flag);
        },
      };
      if (type == 'start') {
        this.pickerStartOptions = pickerOptions;
      } else {
        this.pickerEndOptions = pickerOptions;
      }
    },
    // 开始结束日期禁用日期
    disabledDate(time, prop, type, flag) {
      if (type === 'end') {
        let startDate = this.query[prop];
        if (flag == '1') {
          if (startDate) {
            return time.getTime() < new Date(startDate).getTime() - 24 * 60 * 60 * 1000 || time.getTime() > Date.now();
          } else {
            return time.getTime() > Date.now();
          }
        }
        if (startDate) {
          return time.getTime() < new Date(startDate).getTime() - 24 * 60 * 60 * 1000;
        }
      } else {
        let endDate = this.query[prop];
        if (endDate) {
          return time.getTime() > new Date(endDate).getTime();
        }
      }
    },

    resetForm(from) {
      if (this.$refs.searchModal) {
        this.$refs.searchModal[0].resetClick();
      }
      if (this.$refs.treeSelect) {
        this.$refs.treeSelect[0].resetClick();
      }
      if (this.$refs.searchTable) {
        this.$refs.searchTable.forEach((item) => {
          item && item.resetClick();
        });
      }
      this.$refs[from].resetFields();
      this.$emit('resetBtnClick');
    },
    search() {
      for (let item of this.columns) {
        if (
          item.type === 'inputRange' &&
          this.query[item.prop[0]] &&
          this.query[item.prop[1]] &&
          Number(this.query[item.prop[0]]) > Number(this.query[item.prop[1]])
        ) {
          return this.$message({
            showClose: true,
            message: `${item.name}输入值下限不能大于上限`,
            type: 'error',
          });
        }
        if (item.type === 'inputRange') {
          // 暂时先全部统一，若需要配置可再加属性 sxp 20210120 update
          if (!this.query[item.prop[0]] && !this.query[item.prop[1]]) {
            this.query[item.prop[0]] = this.query[item.prop[1]] = null;
          } else {
            this.query[item.prop[0]] = this.query[item.prop[0]] ? this.query[item.prop[0]] : 0;
            this.query[item.prop[1]] = this.query[item.prop[1]] ? this.query[item.prop[1]] : null;
          }
        }
      }
      this.$emit('searchBtnClick', { query: this.query });
    },
    /**
     * 搜索表格搜索
     * @param {*} val 当前值
     * @param {*} column //
     */
    changeMethod(val, column) {
      const { relatedColumn, changeMethod, prop, extraQueryFields, inputField } = column;
      if (!changeMethod) {
        return;
      }
      if (relatedColumn) {
        for (const item of relatedColumn) {
          this.query[item] = null;
        }
      }
      // 主要的数据
      this.query[prop] = val.map((item) => item[inputField ?? 'id']).join(',');
      for (const item of extraQueryFields ?? []) {
        this.query[item['queryField']] = val.map((it) => it[item['originField'] ?? item['queryField']]).join(',');
      }
      if (typeof changeMethod === 'function') {
        changeMethod(val);
      } else {
        this.$emit(changeMethod, { val: val, prop });
      }
    },
    clearMethod(val, method) {
      if (!method) {
        return;
      }
      this.$emit(method, { val: val });
    },
    toggle() {
      this.expand = !this.expand;
    },
  },
  components: {
    FormWrapper,
    InputRange,
    SelectRange,
    FullAddressSelect,
  },
};
</script>
<style lang="scss">
.popper__arrow::after {
  border-bottom-color: #000000 !important;
}

.el-popper-search {
  .popper__arrow::after {
    border-bottom-color: #ffffff !important;
  }
}
</style>
<style lang="scss" scoped>
$maintheme: #6299fe;

.sirui-search {
  box-shadow: 0px 1px 5px #ddd;
}
::v-deep .el-form-item__label {
  font-size: 13px;
}
.sirui-search .el-form-item {
  margin-bottom: 13px;
}

.search-expand {
  cursor: pointer;
  margin: 0 0 0 1px;
  font-size: 12px;
  color: $maintheme;
}

.edit-form {
  background: #fff;
  padding: 0 20px;
  box-sizing: border-box;
}

.sirui-search {
  background: #fff;
  border-radius: 4px;
  padding: 20px 20px 20px 30px;
  padding-bottom: 3px;
}

@media screen and (max-width: 1536px) {
  .text-right {
    .search {
      width: 65px;
    }

    .reset {
      width: 65px;
    }
  }
}

.text-right {
  a {
    display: inline-block;
    width: 90px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    margin-right: 10px;
    text-align: center;
    font-size: 12px;
  }

  img {
    vertical-align: middle;
    padding-right: 6px;
  }

  .search {
    background-color: #409eff;
    color: #ffffff;
  }

  .reset {
    border: 1px solid #e4e6eb;
    color: #409eff;
  }

  .open-btn {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #e4e6eb;
    display: inline-block;
    cursor: pointer;
    color: #00b400;
    text-align: center;
    border-radius: 3px;

    img {
      padding-right: 0;
    }
  }

  .active {
    transform: rotate(180deg);
  }
}

.el-button {
  border-radius: 3px;
  border: 1px solid #6299fe;
  color: #6299fe;
  margin-left: 3px;
}

.el-button--primary {
  background-color: $maintheme;
  border-color: $maintheme;
  color: #fff;
}

.line-text {
  font-size: 14px;
  color: #888;
  margin-bottom: 15px;
}

::v-deep .el-select__caret {
  transform: rotateZ(0) !important;
}

::v-deep .el-select__caret.is-reverse {
  transform: rotateZ(180deg) !important;
}

::v-deep .el-icon-arrow-up {
  width: 25px;
  background: url('../../../assets/serach/select.svg') center center no-repeat;
  background-size: 20px;
}

::v-deep .el-icon-arrow-up:before {
  content: '替';
  font-size: 16px;
  visibility: hidden;
}

::v-deep .el-icon-arrow-down {
  width: 25px;
  background: url('../../../assets/serach/select.svg') center center no-repeat;
  background-size: 20px;
  //transform: rotateZ(180deg);
}
</style>
